<template>
  <!-- 为你推荐 -->
  <div class="recommend">
    <div class="header">
      <div class="left">为你推荐</div>
      <div class="right"><van-icon name="arrow" size="20" /></div>
    </div>

    <div class="list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <ul class="recommends-list">
          <li
            class="recommends-list-item"
            v-for="recommend in recommendList"
            :key="recommend.showId"
            @click="goToShowDetail(recommend.showId)"
          >
            <div class="cover">
              <img :src="recommend.imgUrl" class="thumb" />
              <div class="tag"></div>
            </div>

            <div class="city-title">
              <div class="title">
                <span class="city">{{ recommend.showCity }}</span
                >{{ recommend.showName }}
              </div>
            </div>

            <div class="time">{{ recommend.showDate }}</div>

            <div class="price">
              {{ recommend.priceInfo?.prefix }} <span>{{ recommend.priceInfo?.yuanNum }}</span>
              {{ recommend.priceInfo?.suffix }}
            </div>
          </li>
        </ul>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { fetchHomeRecommend } from '@/api/index.js'
import { useStore } from '@/stores/index.js'
const store = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()

/* 属性 变量 */
const loading = ref(false)
const finished = ref(false)

const length = ref(20) //每页数量
const pageNum = ref(1) //当前页码
const currentTotal = ref(0) //当前请求的得到的数据总条数
const recommendList = ref([])

/* 计算属性 */
//翻页偏移量
const offset = computed(() => (pageNum.value - 1) * length.value)

//当前城市
const currentCity = computed(() => {
  return store.currentCity
})

/* 生命周期 */

onMounted(async () => {
  await getHomeRecommend(currentCity.value.cityId, length.value, offset.value)
})

/* 方法 */
// 获取首页推荐数据
const getHomeRecommend = async (cityId, length, offset) => {
  loading.value = true
  const { statusCode, data } = await fetchHomeRecommend(cityId, length, offset)

  if (statusCode === 200 && data.length > 0) {
    recommendList.value.push(...data)
    currentTotal.value = data.length
    pageNum.value++
  }

  loading.value = false
}

// 加载更多数据
const onLoad = async () => {
  // 当前页面数量少于pageSize，没有后续加载
  if (currentTotal.value < length.value) {
    loading.value = false
    finished.value = true
    return
  } else {
    // console.log('继续加载')
    await getHomeRecommend(currentCity.value.cityId, length.value, offset.value)
  }
}

const goToShowDetail = (id) => {
  router.push({ path: '/show-detail', query: { showId: id } })
}
</script>

<style scoped lang="scss">
.recommend {
  padding: 0 15px;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .left {
    }

    .right {
    }
  }

  .list {
    ul.recommends-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      align-items: start;
      justify-items: start;
      justify-content: start;
      align-content: center;

      li.recommends-list-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        overflow: hidden;

        .cover {
          height: 250px;
          width: 100%;
          position: relative;
          margin-bottom: 10px;

          .thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
          }

          .tag {
          }
        }

        .city-title {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          font-weight: 500;

          .title {
            font-size: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;

            .city {
              font-size: 12px;
              border: 1px solid #ccc;
              margin-right: 5px;
              padding: 2px;
            }
          }
        }

        .time {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 500;
          color: #323038;
          margin: 10px 0;
        }

        .price {
          color: #ff1d41;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 10px;
          font-weight: 400;

          span {
            font-size: 20px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
